<template>
  <div class="specia">
    <!-- 标题 -->
    <div class="specia-title">
      <div class="report-go" @click="returnHandle" v-if="isContent">
        <!-- <i class="el-icon-back"></i> -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/specia' }">专题管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ selectObj.name  }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="specia-title__name" v-if="!isContent">
        <!-- {{ !isContent ? "专题管理" : selectObj.name }} -->
        专题管理
      </div>
      <div class="specia-title__right">
        <div class="specia-title__temp" @click="changSortName">
          <div class="specia-title__temp-name">
            {{ !isContent ? "专题名称" : "数据集名称" }}
          </div>
          <img :src="desc === false && sortBy === 1 ? nameSort.img1 : nameSort.img2
        " class="specia-title__temp-cion" />
        </div>
        <div class="specia-title__temp" @click="changSortCreate">
          <div class="specia-title__temp-name">创建时间</div>
          <img :src="desc === false && sortBy === 2 ? dateSort.img1 : dateSort.img2
        " class="specia-title__temp-cion" />
        </div>
        <div class="specia-title__temp" @click="changSortUpdate">
          <div class="specia-title__temp-name">更新时间</div>
          <img :src="desc === false && sortBy === 3 ? uploadSort.img1 : uploadSort.img2
        " class="specia-title__temp-cion" />
        </div>
        <el-input class="specia-title__temp-ipt" suffix-icon="el-icon-search" v-model="name"
          :placeholder="!isContent ? '请输入专题名称' : '请输入数据集名称'" @change="queryHandler"></el-input>



      </div>
    </div>
    <!-- 专题数据 -->
    <div class="specia-content" v-if="!isContent">
      <div class="specia-content-temp" v-for="item in dataList" :key="item.id">
        <div class="specia-content-add" v-if="item.name === 'init'" @click="handAdd" style="min-height: 180px">
          <img src="./assets/images/plus.png" height="48" alt="" />
          <div>创建专题</div>
        </div>
        <div class="specia-content-item" v-else @click="handContent(item)">
          <div class="specia-content-item-name">{{ item.name }}</div>
          <div class="specia-content-item-content">{{ item.description }}</div>
          <div class="specia-content-item-date">
            <img src="./assets/images/date.png" alt="" />
            <div>
              {{ item.createTime }}
            </div>
          </div>

          <div class="specia-content-item-line"></div>
          <div class="specia-content-item-btm">
            <div class="specia-content-item-btm-name">
              数据集数量：
              <div class="specia-content-item-btm-num">
                {{ item.datasetNumber || 0 }}
              </div>
            </div>
            <div class="specia-content-item-btm-up" @click.stop="hanAddFile(item)">
              <img src="./assets/images/plus.png" height="48" alt="" />
              导入数据集
            </div>
            <!-- <i class="el-icon-edit-outline edit-icon otherColor" @click="changeSubjectHandle(item)"></i> -->
            <i class="fa-regular fa-pen-to-square edit-icon" @click.stop="changeTopicHandle(item)"></i>
            <i class="fa-regular fa-trash-can specia-iconed" @click.stop="delSubjectHandle(item)"></i>

          </div>
        </div>
      </div>
    </div>
    <!-- 数据集数据 -->
    <div class="specia-content2" v-else>
      <div class="specia-content-temp" v-for="item in fileDataList" :key="item.id">
        <div class="specia-content-add" v-if="item.name === 'init'" @click="hanAddFilego()">
          <img src="./assets/images/plus.png" height="48" alt="" />
          <div>导入数据集</div>
        </div>
        <div class="specia-content-item" v-else>
          <div class="specia-content-item-name">{{ item.name }}</div>
          <div class="specia-content-item-content">{{ item.description }}</div>
          <div class="specia-content-item-count">
            <!-- <div>节点数:{{ item.nodeNum }}</div> -->
            <div>共收录:{{ item.collectNum }}</div>
          </div>
          <!-- <div class="specia-content-item-content otherColor">{{ item.description }}</div> -->
          <div class="specia-content-item-date">
            <img src="./assets/images/date.png" alt="" />
            <div>
              {{ item.createTime }}
            </div>
          </div>
          <!-- 删除标志 -->
          <i class="fa-regular fa-pen-to-square edit-icon otherColor" @click="changeSubjectHandle(item)"></i>
          <i class="fa-regular fa-trash-can specia-icon otherColor" @click="deldatasetHandle(item)"></i>
        </div>
      </div>
    </div>
    <!-- 创建专题 -->
    <el-dialog title="创建专题" width="429px" class="specia-dialog" :visible.sync="isSpecia" :show-close="false">
      <el-row :gutter="20" type="flex" align="middle" class="mb-16">
        <el-col :span="6">专题名称</el-col>
        <el-col :span="18"><el-input class="specia-dialog__body-temp-ipt" v-model="addname" placeholder="请输入专题名称"
            maxlength="20" show-word-limit></el-input></el-col>
      </el-row>
      <el-row :gutter="20" type="flex" align="middle">
        <el-col :span="6">专题简介</el-col>
        <el-col :span="18"><el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2 }"
            class="specia-dialog__body-temp-ipt" v-model="addcontent" placeholder="请输入专题简介" maxlength="200"
            show-word-limit></el-input></el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="isSpecia = false">取 消</el-button>
        <el-button type="primary" @click="addSubjectHandler">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改专题 -->
    <el-dialog title="修改专题" width="429px" class="specia-dialog" :visible.sync="isEditSpecia" :show-close="false">
      <el-row :gutter="20" type="flex" align="middle" class="mb-16">
        <el-col :span="6">专题名称</el-col>
        <el-col :span="18"><el-input class="specia-dialog__body-temp-ipt" v-model="editname" placeholder="请输入专题名称"
            maxlength="20" show-word-limit></el-input></el-col>
      </el-row>
      <el-row :gutter="20" type="flex" align="middle">
        <el-col :span="6">专题简介</el-col>
        <el-col :span="18"><el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2 }"
            class="specia-dialog__body-temp-ipt" v-model="editcontent" placeholder="请输入专题简介" maxlength="200"
            show-word-limit></el-input></el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditSpecia = false">取 消</el-button>
        <el-button type="primary" @click="changeTopic">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改数据集" width="429px" class="specia-dialog" :visible.sync="isdatachange" :show-close="false">
      <div class="specia-dialog__body">
        <el-row :gutter="20" type="flex" align="middle" class="mb-16">
          <el-col :span="6">数据集名称</el-col>
          <el-col :span="18"><el-input class="specia-dialog__body-temp-ipt" v-model="changeQuery" placeholder="请输入数据集名称"
              maxlength="20" show-word-limit></el-input></el-col>
        </el-row>
        <el-row :gutter="20" type="flex" align="middle">
          <el-col :span="6">数据集简介</el-col>
          <el-col :span="18"><el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2 }"
              class="specia-dialog__body-temp-ipt" v-model="datasetIntroduce" placeholder="请输入数据集简介" maxlength="200"
              show-word-limit></el-input></el-col>
        </el-row>


      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isdatachange = false">取 消</el-button>
        <el-button type="primary" @click="changeDataSetHanlde">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 导入 -->
    <el-dialog title="导入数据集" width="429px" class="specia-dialog" :visible.sync="isUpload" :show-close="false">
      <div class="specia-dialog__body">
        <div class="mb-16">支持Incopat专利数据导入，包含但不限于模板字段。 </div>
        <el-upload class="upload-demo" drag action="http://101.42.6.163:8686/patent/uploadImport" multiple
          accept=".xlsx" :headers="headers" :on-success="handleSuccess" :data="uploadData" :file-list="fileList">
          <img class="upload-demo-img" src="./assets/images/upload.png" alt="" />
          <div class="el-upload__text">
            请上传需要导入的数据集，格式（EXCEL）
          </div>
          <div class="upload-demo-upload" @click.stop="handUpload">
            数据集模板下载
          </div>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { downloaddatasetList } from "@/api/modules/subject_data";
import {
  subjectdatasetList,
  removedatasetList,
  editdatasetList,
} from "@/api/modules/subject_data";
import { subjectList, addSubject, delSubject, editSubject } from "@/api/modules/subject";
import dateUtils from "../../utils/dateUtils.js";
export default {
  name: "SpecialPage",
  data() {
    return {
      datasetIntroduce: '', //修改数据集，数据集简介
      nameSort: {
        sort: "des",
        img1: require("./assets/images/sort-a.png"),
        img2: require("./assets/images/sort-z.png"),
      },
      dateSort: {
        sort: "des",
        img1: require("./assets/images/sort1.png"),
        img2: require("./assets/images/sort2.png"),
      },
      uploadSort: {
        sort: "des",
        img1: require("./assets/images/sort1.png"),
        img2: require("./assets/images/sort2.png"),
      },
      initObj: {
        name: "init",
        datasetNumber: 0,
        createTime: new Date(),
        description: "123123123123123123123123123",
        id: 1,
      },
      dataList: [],
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token"),
      },
      fileDataList: [],
      isSpecia: false,
      isEditSpecia: false,
      isUpload: false,
      name: "",
      addname: "",
      addcontent: "",
      editname: "",
      editID: "",
      editcontent: "",
      isContent: false, // 是否打开具体内容
      selectObj: null,
      subjectId: "",
      uploadData: {
        subjectId: "",
        id: "",
      },
      desc: true,
      sortBy: "",
      // sortName: 1,
      uploadDataID: "",
      fileList: [],
      isdatachange: false,
      changeID: "",
      changeQuery: "",
    };
  },
  beforeDestroy() {
    this.$bus.$off("showindex");
  },
  mounted() {
     
    this.$bus.$on("showindex", (data) => {
      if (this.isContent) {
        this.isContent = false;
      }
    });
    this.getsubjectListHanlde();
    // 初始化
  },
  methods: {
    handleEvent(payload) {
    },
    changeDataSetHanlde() {
      editdatasetList({
        id: this.changeID,
        name: this.changeQuery,
        description: this.datasetIntroduce
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
          });
          this.isdatachange = false;
          this.getsubjectDataListHanlde();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    changeSubjectHandle(item) {
      this.changeQuery = item.name;
      this.changeID = item.id;
      this.datasetIntroduce = item.description;
      this.isdatachange = true;
    },
    changeTopicHandle(item) {
      this.editID = item.id;
      this.editname = item.name;
      this.editcontent = item.description;
      this.isEditSpecia = true;
    },
    changeTopic() {
      editSubject({
        id: this.editID,
        name: this.editname,
        description: this.editcontent,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
          });
          this.isEditSpecia = false;
          this.getsubjectListHanlde();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    queryHandler() {
      if (this.isContent) {
        this.getsubjectDataListHanlde();
      } else {
        this.getsubjectListHanlde();
      }
    },
    returnHandle() {
      this.name = "";
      this.isContent = false;
      this.getsubjectListHanlde();
    },
    deldatasetHandle(item) {
      removedatasetList(item.id).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
          });
          this.getsubjectDataListHanlde();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    changSortName() {
      this.sortBy = 1;
      if (this.desc == true) {
        this.desc = false;
      } else {
        this.desc = true;
      }
      if (this.isContent) {
        this.getsubjectDataListHanlde();
      } else {
        this.getsubjectListHanlde();
      }
    },
    changSortCreate() {
      this.sortBy = 2;
      if (this.desc == true) {
        this.desc = false;
      } else {
        this.desc = true;
      }
      if (this.isContent) {
        this.getsubjectDataListHanlde();
      } else {
        this.getsubjectListHanlde();
      }
    },
    changSortUpdate() {
      this.sortBy = 3;
      if (this.desc == true) {
        this.desc = false;
      } else {
        this.desc = true;
      }
      if (this.isContent) {
        this.getsubjectDataListHanlde();
      } else {
        this.getsubjectListHanlde();
      }
    },

    handleSuccess(response, file, fileList) {
      if (response.code === 200) {
        // 上传成功

        this.$message.success("上传成功");
        this.isUpload = false;
        if (this.isContent) {
          this.getsubjectListHanlde(); // 上传成功之后同步更新专题列表，以正确显示数据集数量
          subjectdatasetList({
            subjectId: this.selectObj.id,
          }).then((res) => {
            if (res.code == 200) {
              this.fileDataList = res.rows;
              this.fileDataList.push({
                name: "init",
                count: 0,

                id: 1,
              });
            } else {
              this.$message({
                message: res.msg,
                type: "error",
                showClose: true,
              });
            }
          });
        } else {
          this.getsubjectListHanlde();
        }
      } else {
        // 上传失败
        this.$message.error(response.msg);
        // 清除上传列表中的该文件
        fileList.splice(fileList.indexOf(file), 1);
      }
    },
    delSubjectHandle(item) {
      this.$confirm('是否确定要删除专题下所有数据集?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delSubject(item.id).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: "success",
              showClose: true,
            });
            this.isSpecia = false;
            this.getsubjectListHanlde();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
              showClose: true,
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });




    },
    getsubjectDataListHanlde() {
      subjectdatasetList({
        subjectId: this.selectObj.id,
        name: this.name,
        desc: this.desc, //true倒序，false正序
        sortBy: this.sortBy,
      }).then((res) => {
        if (res.code == 200) {
          this.fileDataList = res.rows;
          this.fileDataList.push({
            name: "init",
            count: 0,

            id: 1,
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    getsubjectListHanlde() {
      subjectList({
        name: this.name,
        desc: this.desc, //true倒序，false正序
        sortBy: this.sortBy,
      }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.rows;
          this.dataList.push({
            name: "init",
            datasetNumber: 0,
            createTime: new Date(),
            // description: "123123123123123123123123123",
            id: 1,
          });
          this.initObj;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    addSubjectHandler() {
      if (!this.addname) {
        this.$message({
          message: "请输入专题名称",
          type: "error",
          showClose: true,
        });
        return;
      }
      if (!this.addcontent) {
        this.$message({
          message: "请输入专题简介",
          type: "error",
          showClose: true,
        });
        return;
      }
      addSubject({
        name: this.addname,
        description: this.addcontent,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
          });
          this.isSpecia = false;
          this.addname = "";
          this.addcontent = "";
          this.getsubjectListHanlde();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
          });
        }
      });
    },
    getDate(item) {
      return dateUtils.dateToStr("yyyy-MM-DD HH:mm:ss", item);
    },
    handAdd() {
      this.isSpecia = true;
    },
    handContent(item) {
      this.selectObj = item;
      this.isContent = true;
      this.getsubjectDataListHanlde();
    },
    hanAddFilego() {
      this.isUpload = true;
      this.fileList = [];
      this.uploadData.subjectId = this.selectObj.id;
    },
    // 添加文件
    hanAddFile(item) {
      this.isUpload = true;
      this.fileList = [];
      this.uploadDataID = item.id;
      this.uploadData.subjectId = item.id;
    },
    // 下载模版
    handUpload() {
      downloaddatasetList({}).then((res) => {
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "template_patent.xlsx"); // 设置文件名
        document.body.appendChild(link);
        link.click();
      });
    },
  },
};
</script>

<style lang="scss">
// 样式覆盖
.specia-dialog {
  .el-dialog__header {
    padding: 24px;
  }

  .el-dialog__body {
    padding: 0 24px;
  }

  .el-dialog__footer {
    padding: 24px;
  }

  .specia-dialog__body {
    padding-bottom: 24px;

    .specia-dialog__body-temp {
      width: 100%;
      display: flex;
      align-items: center;
      height: 46px;

      &:first-child {
        margin-bottom: 24px;
      }

      &>div {
        width: fit-content;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 24px;
        margin-right: 24px;
      }

      .specia-dialog__body-temp-ipt {
        flex: 1;
        height: 100%;
      }
    }

    .upload-demo {
      width: 100% !important;
      border-radius: 0 !important;

      .el-upload {
        width: 100% !important;
        // margin-bottom: 24px;
      }

      .el-upload-dragger {
        width: 100% !important;
        border-radius: 0 !important;
      }

      .el-upload__text {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #313131;
        line-height: 24px;
        margin-bottom: 10px;
      }

      .upload-demo-upload {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #4c56bb;
        line-height: 24px;
        cursor: pointer;
      }

      .upload-demo-img {
        width: 60px;
        height: 60px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-bottom: 10px;
      }

      .el-upload-dragger {
        padding-top: 16px;
      }
    }
  }
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.report-go {
  width: fit-content;
  font-size: 24px;
  padding-right: 8px;
  cursor: pointer;

  &>i {
    color: #313131 !important;
  }
}

.specia {
  width: 100%;
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .specia-title {
    // height: 46px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .specia-title__name {
      font-size: 14px;
      font-weight: bold;
      flex: 1;
      color: #313131;
      line-height: 23px;
    }

    .specia-title__temp {
      display: flex;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #313131;
      line-height: 24px;
      margin-right: 24px;
      align-items: center;
      justify-content: flex-end;
      cursor: pointer;

      .specia-title__temp-name {
        margin-right: 4px;
        width: fit-content;
        height: 24px;
        white-space: nowrap;
      }

      .specia-title__temp-cion {
        width: 16px;
        height: 16px;
      }
    }

    .specia-title__right {
      display: flex;
      align-items: center;
      padding-right: 28px;
    }

    .specia-title__temp-ipt {
      width: 300px;
    }

    .specia-title__temp-btn {
      margin-left: 24px;
    }
  }

  .specia-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 24px;
    box-sizing: border-box;
    overflow-y: scroll;

    .specia-content-temp {
      width: calc(25% - 24px);
      margin-bottom: 24px;
      margin-right: 24px;

      border-radius: 8px;
      background: #fff;
      cursor: pointer;

      &:hover {
        box-shadow: 0px 8px 8px 0px rgba(76, 86, 187, 0.05);
      }
    }

    .otherClass {
      background: #4c56bb !important;
    }

    .otherColor {
      color: #fff !important;
    }

    .specia-content-add {
      width: 100%;
      height: 100%;
      padding: 24px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #4c56bb;
      line-height: 20px;
    }

    .specia-content-item {
      padding: 24px;
      box-sizing: border-box;
      position: relative;

      .specia-content-item-name {
        // height: 15px;
        height: 32px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #4c56bb;
        line-height: 21px;
        width: auto;
        // margin-bottom: 12px;
      }

      .specia-content-item-count {
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
      }

      .specia-content-item-content {
        height: 72px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 20px;
        width: 100%;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        margin-bottom: 16px;
      }

      .specia-content-item-date {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 14px;
        width: 100%;

        &>img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }

        margin-bottom: 13px;
      }

      .specia-content-item-line {
        width: 100%;
        height: 1px;
        background: #e7e7e7;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-bottom: 14px;
      }

      .specia-content-item-btm {
        display: flex;
        align-items: center;

        .specia-content-item-btm-name {
          display: flex;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #313131;
          line-height: 20px;

          .specia-content-item-btm-num {
            font-size: 16px;
            font-family: DIN Alternate, DIN Alternate;
            font-weight: bold;
            color: #313131;
            line-height: 20px;
          }
        }

        .specia-content-item-btm-up {
          width: 90px;
          height: 24px;
          border-radius: 6px;
          display: flex;
          align-items: center;

          &>img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }

          background: #f2f5ff;
          cursor: pointer;
          font-size: 12px;
          font-family: PingFang SC,
          PingFang SC;
          font-weight: 400;
          color: #4c56bb;
          line-height: 20px;
          margin-left: 8px;
        }

        .specia-content-item-delete {
          margin-left: auto;

          .el-icon-delete {
            display: none;
          }

          .analyzepage-icon-view {
            position: absolute;
            right: 56px;
            bottom: 18px;
            font-size: 24px;
            color: #000000;
            display: none;
          }
        }
      }

      .specia-icon {
        display: none;
        position: absolute;
        right: 24px;
        bottom: 34px;
        font-size: 18px;
      }

      .specia-iconed {
        display: none;
        position: absolute;
        right: 24px;
        bottom: 25px;
        font-size: 18px;
      }

      .edit-icon {
        display: none;
        position: absolute;
        right: 50px;
        bottom: 25px;
        font-size: 18px;
      }

      &:hover {
        .specia-iconed {
          display: inline-block !important;
        }

        .specia-icon {
          display: inline-block !important;
        }

        .edit-icon {
          display: inline-block !important;
        }
      }
    }
  }

  .specia-content2 {
    width: 100%;
    display: flex;
    flex-direction: wrap;
    flex-wrap: wrap;
    padding-top: 24px;
    box-sizing: border-box;
    overflow-y: scroll;

    .specia-content-temp {
      width: calc(25% - 24px);
      margin-bottom: 24px;
      margin-right: 24px;

      border-radius: 8px;
      background: #fff;
      cursor: pointer;

      &:hover {
        box-shadow: 0px 8px 8px 0px rgba(76, 86, 187, 0.05);
      }
    }

    .specia-content-add {
      width: 100%;
      height: 100%;
      padding: 24px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #4c56bb;
      line-height: 20px;
    }

    .specia-content-item {
      padding: 16px;
      box-sizing: border-box;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;

      .specia-content-item-name {
        // height: 15px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        color: #4c56bb;
        width: auto;
        // margin-bottom: 12px;
      }

      .specia-content-item-count {
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .specia-content-item-content {
        height: 60px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 20px;
        width: 100%;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
      }

      .specia-content-item-date {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #939393;
        line-height: 14px;
        width: 100%;

        &>img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
      }

      .specia-content-item-line {
        width: 100%;
        height: 1px;
        background: #e7e7e7;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-bottom: 14px;
      }

      .specia-content-item-btm {
        display: flex;
        align-items: center;

        .specia-content-item-btm-name {
          display: flex;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #313131;
          line-height: 20px;

          .specia-content-item-btm-num {
            font-size: 16px;
            font-family: DIN Alternate, DIN Alternate;
            font-weight: bold;
            color: #313131;
            line-height: 20px;
          }
        }

        .specia-content-item-btm-up {
          width: 90px;
          height: 24px;
          border-radius: 6px;
          display: flex;
          align-items: center;

          &>img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }

          background: #f2f5ff;
          cursor: pointer;
          font-size: 12px;
          font-family: PingFang SC,
          PingFang SC;
          font-weight: 400;
          color: #4c56bb;
          line-height: 20px;
          margin-left: 8px;
        }
      }

      .specia-icon {
        display: none;
        position: absolute;
        right: 24px;
        bottom: 24px;
        font-size: 18px;
      }

      .specia-iconed {
        display: none;
        position: absolute;
        right: 24px;
        bottom: 25px;
        font-size: 18px;
      }

      .edit-icon {
        display: none;
        position: absolute;
        right: 50px;
        bottom: 24px;
        font-size: 18px;
      }

      &:hover {
        .specia-iconed {
          display: inline-block !important;
        }

        .specia-icon {
          display: inline-block !important;
        }

        .edit-icon {
          display: inline-block !important;
        }
      }
    }
  }
}
</style>
